<!--
 * @Author: zw 775925302@qq.com
 * @Date: 2023-02-11 10:18:42
 * @LastEditors: zw 775925302@qq.com
 * @LastEditTime: 2023-02-19 12:12:41
 * @FilePath: /z-lowcode-designerz/src/views/designer/web/designer-component/index.vue
-->
<template>
  <el-tabs type="border-card" tab-position="left" v-model="activeName" style="height: 100%">
    <el-tab-pane v-for="(item, index) in cmps" :key="index" :label="item.category" :name="item.code">
      <div class="rowBetween" style="flex-wrap: wrap">
        <DragWidget :element="elem" v-for="(elem, indexEl) in item.components" :key="indexEl" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts" name="ComponentPanel">
import { reactive, ref } from "vue";
import { deepClone, generateId, isEmpty } from "@/utils/StrUtil";
import { designer } from "@/store/designer";
import DragWidget from "./DragWidget.vue";

const { getWidgetCloneObj } = designer();

var activeName = "common";

const cmps = reactive([
  {
    category: "常用",
    code: "common",
    components: [
      {
        id: generateId(),
        name: "卡片",
        component: "DCard",
        icon: "cmp-container",
        cmpType: "layout",
        widgetList: [],
      },
      {
        id: generateId(),
        name: "按钮",
        component: "DButton",
        icon: "cmp-button",
        cmpType: "component",
      },
      {
        id: generateId(),
        name: "文本",
        component: "DText",
        icon: "cmp-text",
        cmpType: "component",
      },
      {
        id: generateId(),
        name: "图片",
        component: "DImage",
        icon: "cmp-image",
        cmpType: "component",
      },
      {
        id: generateId(),
        name: "分割线",
        component: "DDivider",
        icon: "cmp-button",
        cmpType: "component",
      },
      {
        id: generateId(),
        name: "输入框",
        component: "DInput",
        icon: "cmp-input",
        cmpType: "component",
      },
    ],
  },
  {
    category: "基础",
    code: "base",
    components: [
      {
        id: generateId(),
        name: "按钮",
        component: "DButton",
        icon: "cmp-button",
        cmpType: "component",
        width: 60,
        height: 24,
        class: [],
        previewImage: "",
      },
    ],
  },
  {
    category: "表单",
    code: "form",
    components: [],
  },
  {
    category: "多媒体",
    code: "media",
    components: [],
  },
]);

var handleClone = (origin: any) => {
  var newOrigin = deepClone(origin);
  newOrigin.id = generateId();
  return Object.assign(newOrigin, getWidgetCloneObj(newOrigin.component));
};
</script>
<style scoped lang="scss"></style>
